<template>
  <scroll-view class="scroll-container" scroll-y>
    <view class="container">
    <!-- 顶部轮播图 -->
      <view class="section">
        <swiper class="swiper" autoplay interval="3000" circular>
          <swiper-item v-for="(img, idx) in swiperImgs" :key="idx">
            <image :src="img" class="swiper-img"></image>
          </swiper-item>
        </swiper>
      </view>

    <!-- 城市介绍 -->
         <rich-text :nodes="cityIntro" class="intro"></rich-text>
		 
    <!-- 探索进度 -->
      <view class="section">
            <view class="title">探索进度</view>
            <progress 
              :percent="progress" 
              activeColor="#FF6A00" 
              backgroundColor="#eee" 
              stroke-width="12"
              show-info
            />
        </view>

    <!-- 城市选择 -->
      <view class="section">
        <text class="title">城市选择</text>
        <picker mode="multiSelector" :range="cityRange" @columnchange="onColumnChange" @change="onCityChange">
          <view class="picker-text">
            当前选择: {{ selectedProvince }}·{{ selectedCity }}·{{ selectedArea }}
          </view>
        </picker>
      </view>

	
	<!-- 偏好设置 -->
	  <view class="section">
	    <text class="title">偏好设置</text>
		
	<!-- 出行方式-->
	    <text class="sub-title">出行方式</text>
	    <radio-group @change="onTravelChange">
	      <label class="radio-label" v-for="(item, idx) in travelModes" :key="idx">
	        <radio :value="item" :checked="selectedTravel === item" color="#FF6A00"/>{{ item }}
	      </label>
	    </radio-group>
	  
	<!-- 显示推荐景点 -->
	    <view class="switch-wrap">
	      <text class="sub-title">显示推荐景点:</text>
	      <switch :checked="showRecommend" @change="onRecommendChange" color="#FF6A00"/>
	    </view>
	<!-- 探索半径 -->
	    <view class="slider-wrap">
	           <text class="sub-title">探索半径: {{radius}} km</text>
	           <slider 
	             :value="radius" 
	             min="1" 
	             max="50" 
	             @change="onRadiusChange" 
	             activeColor="#FF6A00"
	             block-color="#FF6A00"
	           />
	         </view>
	  </view>
    <!-- 媒体展示-->
      <view class="section">
        <text class="title">泉州宣传</text>
        <video :src="videoUrl" class="video" controls></video>
      </view>
	  
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图
      swiperImgs: [
        "/static/city1.png",
        "/static/city2.jpg",
        "/static/city3.jpg",
		"/static/city4.jpg",
		"/static/city5.jpg"
      ],
      // 城市介绍
       cityIntro: `
              <div style="line-height: 1.6;">
                <p><b>泉州</b>，古称<strong style="color:#FF6A00;">刺桐城</strong>，位于福建省东南部，是海上丝绸之路的起点。</p>
                <p>🌟 历史地位：宋元时期世界第一大港</p>
                <p>🌟 著名景点：<span style="color:#1E90FF;">开元寺、清源山、崇武古城</span></p>
                <p>🌟 文化遗产：<br>✅ 南音<br>✅ 梨园戏<br>✅ 木偶戏</p>
                <p>🌶️ 特色美食：面线糊、土笋冻、海蛎煎</p>
              </div>
      `,
      // 探索进度
      progress: 60,
      // 城市选择
      cityRange: [
        ["福建省",],
        ["泉州市"],
        ["洛江区","鲤城区","丰泽区","南安市","石狮市"]
      ],
      selectedProvince: "福建省",
      selectedCity: "泉州市",
      selectedArea: "南安市",
      // 媒体资源
      videoUrl: "/static/city-video.mp4", 
      audioName: "泉州南音·泉州传统乐团",
      // 偏好设置
      travelModes: ["公交", "自驾", "步行"],
      selectedTravel: "公交",
      showRecommend: true,
      radius: 12
    };
  },
  methods: {
    // 城市选择-列变化
    onColumnChange(e) {
      const { column, value } = e.detail;
      if (column === 0) {
        this.cityRange[1] = ["泉州市"];
        this.cityRange[2] = ["鲤城区", "丰泽区","洛江区"];
      }
    },
    // 城市选择-确认选择
    onCityChange(e) {
      const [pIdx, cIdx, aIdx] = e.detail.value;
      this.selectedProvince = this.cityRange[0][pIdx];
      this.selectedCity = this.cityRange[1][cIdx];
      this.selectedArea = this.cityRange[2][aIdx];
    },
    // 出行方式选择
    onTravelChange(e) {
      this.selectedTravel = e.detail.value;
    },
    // 推荐景点开关
    onRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    // 探索半径滑块
    onRadiusChange(e) {
      this.radius = e.detail.value;
    },
  }
};
</script>

<style scoped>
.scroll-container {
  height: 100vh;
  width: 100%;
}
.container {
  padding: 15rpx;
  box-sizing: border-box;
}
.section {
  margin-bottom: 30rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}
.swiper {
  height: 300rpx;
}
.swiper-img {
  width: 100%;
  height: 100%;
}
.rich-text {
  font-size: 28rpx;
  line-height: 40rpx;
}
.picker-text {
  font-size: 28rpx;
  padding: 15rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
}
.video {
   width: 100%;
   height: 400rpx;
   border-radius: 16rpx;
}
.sub-title {
  font-size: 28rpx;
  margin: 15rpx 0;
  display: block;
}
.radio-label {
  margin-right: 20rpx;
  font-size: 28rpx;
}
.switch-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
</style>

